<template>
	<div class="el-full el-box-column">
		<el-card class="box-card el-card-flex">
			<div slot="header" class="clearfix">
				<span>
					<i class="el-icon-warning-outline"></i>
					会议详情
				</span>
			</div>
			<div class="text item el-over-auto">
				<el-form label-width="300px" ref="addData" :model="addData">
					<el-form-item label="" prop="">
						<el-col :span="18">
							<span style="color:#909399">预定人：{{addData.createdByName}}</span>
							<span style="color:#909399;padding-left:10px">会议室：{{addData.roomName}}</span>
							<span style="color:#909399;padding-left:10px">位置：{{addData.position}}</span>
						</el-col>
					</el-form-item>
					<el-form-item label="会议主题：" prop="meetingSubject">
						<el-col :span="18">
							<span>{{addData.meetingSubject}}</span>
						</el-col>
					</el-form-item>
					<el-form-item label="会议编码：" prop="reservationCode">
						<el-col :span="12">
							<span>{{addData.reservationCode}}</span>
							<!-- <el-input v-model="addData.reservationCode" disabled placeholder="会议编码" auto-complete="off"></el-input> -->
						</el-col>
					</el-form-item>
					<el-form-item label="会议日期：" prop="meetingDate">
						<el-col :span="4">
							<span>{{addData.meetingDate}}</span>
							<span>{{addData.startTime}}</span>-<span>{{addData.endTime}}</span>
						</el-col>
					</el-form-item>
					<el-form-item label="组织内参会人员：" prop="waiter">
						<el-col :span="12">
							<span>{{addData.waiter}}</span>
						</el-col>
					</el-form-item>
					<el-form-item label="外部参会人员：" prop="waiter">
						<el-col :span="12">
							<span>{{addData.foreigners}}</span>
						</el-col>
					</el-form-item>
					<el-form-item label="参会人数：" prop="members">
						<el-col :span="12">
							<span>{{addData.members}}</span>人
						</el-col>
					</el-form-item>
					<!-- <el-form-item label="提醒：" prop="notifyIntervalTime">
                <el-col :span="24">
                  <span>{{addData.notifyIntervalTimeName}}</span>
                 
                </el-col>

              </el-form-item>
              <el-form-item label="提醒方式：" prop="notifyMode">
                <el-col :span="24">
                  <span>{{addData.notifyModeName}}</span>
                  
                </el-col> -->
					</el-form-item>
					<el-form-item label="内容：" prop="meetingContent">
						<el-col :span="12">
							<span>{{addData.meetingContent}}</span>
						</el-col>
					</el-form-item>
					<el-form-item label="附件：">
						<el-col :span="12" class="upload-view">
							<el-upload :disabled="true"  action="#" :file-list="fileList" :on-preview="handlePreview">
							</el-upload>
						</el-col>
					</el-form-item>
					<el-form-item label="" prop="">
						<el-col :span="12">
							<div class="priceD" style="border-bottom:none;">
								<span style="color:#666">会议室费用使用标准</span>
								<span style="float:right;color:#666">{{addData.price}}元/小时</span>
							</div>
							<div class="priceD" style="border-bottom:none;border-top:none;">
								<span style="color:#666">会议时长</span>
								<span style="float:right;color:#666">{{duration}}小时</span>
							</div>
							<div class="priceD">
								<span>预计会议费用</span>
								<span style="float:right;color:red">{{cost}}</span>
							</div>
						</el-col>
					</el-form-item>

					<el-form-item label="" prop="">
						<el-col :span="12">
							<el-input type="textarea" :rows="4" v-model="addData.content" placeholder="请填写内容"></el-input>
							<el-button type="danger" style="display:block;float:right;margin-top:8px" @click="handleCheckContent('addData')">回
								复 <i class="el-icon-document-checked"></i></el-button>
						</el-col>
					</el-form-item>
					<el-form-item label="" prop="">
						<el-col :span="12">
							<div class="text item el-over-auto">
								<ul class="text mid-panels">
									<li class="el-box panel" v-for="(val, index) in addData.roomCommentList" :key="index">
										<div class="user-avatar">{{val.attendee}}</div>
										<div class="listRightPart">
											<span class="name">{{val.attendee}}</span>
											<span class="dept">{{val.content}}</span>
											<p>{{val.creationDate}}<span style="float:right;color:#909399" @click="handDelete(val)">删除</span></p>
											<!-- <span style="float:right;color:#909399">删除</span> -->
										</div>
									</li>
								</ul>
							</div>
						</el-col>
					</el-form-item>
				</el-form>
			</div>
			<div style="text-align: right;margin-bottom: 8px;margin-right: 8px;">
				<el-button type="" @click="handleConsent('addData')" v-if="isFlag">审 批 <i class="el-icon-document-checked"></i></el-button>
				<el-button type="danger" @click="handleRejected('addData')" v-if="isFlag">驳 回 <i class="el-icon-document-checked"></i></el-button>
				<el-button type="danger" @click="cancelEvt()">关 闭 <i class="el-icon-close"></i></el-button>
			</div>
		</el-card>

	</div>
</template>
<script>
	import {
		Dialog,
		Table,
		TableColumn,
		Pagination,
		MessageBox,
		Message,
		Drawer,
		Tabs,
		TabPane,
		Upload
	} from 'element-ui'

	import {
		attachPath, //附件绝对地址
		uploadByBusinessUrl, //上传接口
		findAttchList, //获取文件列表
		preview, //预览图片
		deleteAttid, //附件删除
		downloadAttach, //附件下载
	} from '@/api/attachCommon/attachCommon.js'
	import {
		addReservation, //保存会议室预定
		putReservation, //提交会议室预定
		getReservation, //获取会议室详情
	} from '@/api/conference/reservation.js'
	import {
		delComment, //删除会议评论
		addComment, //新增会议评论
		commentList, //查询会议评论
		putAudit, //会议室预定审核处理
	} from '@/api/conference/conferenceEmploy.js'

	import selectPersonnelDalog from "@/components/selectPersonnel"
	import selectOrg from '../selectOrg'

	export default {
		name: "creatColumn",
		components: {
			'el-dialog': Dialog, // 对话框
			'el-table': Table, // 表格
			'el-table-column': TableColumn, // 表格列
			'el-pagination': Pagination, // 分页
			'el-drawer': Drawer, // 抽屉
			'el-tabs': Tabs, // 标签页
			'el-tab-pane': TabPane, // 标签页列
			"el-upload": Upload, //上传

		},
		data() {
			return {
				elDialogTreeKey: 3,
				imageUrl: '',
				getFile: {},
				headingId: '',
				fileData: {
					bigCatName: '',
					smallCatName: '',
					businessId: ''
				},
				addData: {
					reservationId: '',
					createdByName: '张三',
					name1: '会议名称',
					name3: '大厅',
					meetingSubject: '会议室培训',
					meetingDate: '2019-11-19',
					startTime: '08:00',
					endTime: '09:00',
					members: '10',
					notifyMode: '4',
					meetingContent: '记得准时参加',
					roomCommentList: [],
					content: '',
					reservationCode: '',

				},
				articleTemplateList: [], //栏目内容下拉
				addStatus: [], //栏目模板
				isShow: false,
				fileList: [],
				formTitle: '预定会议室',
				imgAttid: '',
				dialogImageUrl: '',
				dialogVisible: false,
				dialogprincipalVisible: false, //选择人员
				dialogOrgVisible: false, //选择组织
				dialogGroupVisible: false, //选择会议类型
				dialogAddrVisible: false, //选择位置
				isFlag: false,
				duration: '',
				cost: '',
				// employeesPeople:[
				//     {
				//         attendee: '张一',
				//         content: '你说什么'
				//     }
				// ]

			}
		},
		created() {
			this.formTitle = '预定会议室'
			this.isFlag = this.$route.params.row.isShow
			if (this.$route.params.row) {
				this.authorizationTabel(this.$route.params.row.reservationId)

			}

		},
		methods: {
			/* 附件下载 */
			handlePreview(file) {
				downloadAttach(file.attId)
			},
			//关闭
			cancelEvt() {
				this.$router.go(-1)
			},
			// 获取详情数据
			authorizationTabel(id) {
				getReservation(id, '2').then(res => {
					if (res.data.code == 10000) {
						this.addData = res.data.data
						//获取附件
						findAttchList({
							businessId: id
						}).then((res) => {
							if (res.data.code == 10000) {
								if (res.data.data.records !== []) {
									let atts = res.data.data.records
									this.fileList.splice(0, this.fileList.length)
									atts.forEach((v) => {
										this.fileList.push({
											name: v.attFullName,
											url: attachPath + v.attRefId,
											attId: v.attId
										})
									})
								}
							}
						})
						let hour1 = this.addData.startTime.split(':')[0]
						let min1 = this.addData.startTime.split(':')[1]
						let hour2 = this.addData.endTime.split(':')[0]
						let min2 = this.addData.endTime.split(':')[1]

						var hours = hour2 - hour1;
						var minutes = min2 - min1;

						if ((minutes == 30 || minutes == -30) && hours < 0) {
							minutes = '0.5'
						} else if (minutes == 0) {
							minutes = ''
						} else {
							minutes = '.5'
						}
						if (hours < 0) {
							hours = ''
						}
						let c = hours + minutes
						this.duration = c
						this.cost = this.addData.price * this.duration
						let peoName = []
						if (this.addData.roomAttendeesList.length !== 0) {
							this.addData.roomAttendeesList.forEach(v => {
								peoName.push(v.attendee)
							});
							this.addData.waiter = peoName.join(',')
						}

						// this.content = this.addData.
						// findAttchList({
						//   businessId: id,
						//   smallCatName:'图片'
						// }).then((res)=>{
						//   if(res.data.code == 10000){

						//     if(res.data.data.records !== []){
						//       this.imgAttid = res.data.data.records[0].attId
						//       preview(this.imgAttid).then((res)=>{
						//         if(res.data.code == 10000){
						//           this.imageUrl = res.data.data;
						//         }
						//       })
						//     }

						//   }
						// })
					}
				})
			},

			//批准
			handleConsent(formName) {
				MessageBox.confirm("您是否确定批准:" + this.addData.meetingSubject + "?", '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						putAudit({
							auditStatus: 'E',
							auditStatusDesc: '批准'
						}, this.addData.reservationId).then(res => {
							if (res.data.code === 10000) {
								Message.success('批准成功')
								this.$router.go(-1)
							}
						})
					})
					.catch(() => {})
			},
			//驳回
			handleRejected(formName) {
				MessageBox.confirm("您是否确定驳回:" + this.addData.meetingSubject + "?", '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						putAudit({
							auditStatus: 'D',
							auditStatusDesc: '驳回'
						}, this.addData.reservationId).then(res => {
							if (res.data.code === 10000) {
								Message.success('驳回成功')
								this.$router.go(-1)
							}
						})
					})
					.catch(() => {})
			},
			//获取会议评论
			getComment() {
				commentList(this.addData.reservationId).then((res) => {
					if (res.data.code == 10000) {
						this.addData.roomCommentList = res.data.data
					}
				})
			},
			//新增评论
			handleCheckContent() {
				addComment({
					content: this.addData.content,
					reservationId: this.addData.reservationId
				}).then((res) => {
					if (res.data.code == 10000) {
						Message.success('新增成功')
						this.getComment()
						this.addData.content = ''
					}
				})
			},
			//删除会议评论
			handDelete(v) {
				console.log(v.commentId)
				// 
				MessageBox.confirm("是否确定删除评论?", '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						delComment(v.commentId).then(res => {
							if (res.data.code === 10000) {
								Message.success('删除成功')
								this.getComment()
								// this.myDelegateTable()
							}
						})
					})
					.catch(() => {})
			},

			//删除确认
			beforeRemove(file, fileList) {
				return MessageBox.confirm(`确定移除 ${ file.name }？`)
			},
			//控制文件个数
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
			},
			beforeAvatarUpload(file) {
				console.log(file)
				if (!file) {
					Message.warning("请选择需要导入的模板！")
					return
				}
			},
			// 上传的文件的列表发生变化
			onChangeFile(file, fileList) {
				this.fileList = fileList
			},
			onSuccess(res) {
				// console.log(res)
				if (res.code === 10000) {
					Message.success('操作成功')
					this.$router.go(-1)
					console.log('成功', res)
				} else {
					Message.success(res.msg)
				}
			},
			// 文件上传(提交)接口失败
			onError(err) {
				Message.error('上传失败')
				console.log('失败', err)
			},
		}
	}
</script>
<style lang="scss" scope>
	.upload-view .el-upload--text{
		display: none;
	}
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.mid-panels {
		li {
			padding: 15px 10px 7px;
			font-size: 12px;
			color: #333333;
			border-top: 1px solid #ededed;

			// overflow: hidden;
			.user-avatar {
				width: 40px;
				height: 36px;
				text-align: center;
				line-height: 36px;
				border-radius: 50%;
				color: #ffffff;
				background-color: #81C684;
			}

			.listRightPart {
				width: 100%;
				display: inline-block;
				padding-left: 10px;
				vertical-align: middle;

				.name {
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 12px;
					color: #333333;
				}

				.dept {
					font-size: 12px;
					color: #333333;
				}
			}

			&:hover {
				cursor: pointer;
				background-color: #fff;
			}
		}

		.loading {
			height: 20px;
			line-height: 20px;
			padding: 0 0 15px 100px;
		}
	}

	.priceD {
		border: 1px solid #ccc;
		padding: 10px;
	}
</style>
